import React, {useEffect, useState } from 'react';
import { Button } from 'antd';

interface Greeting {
    name: string;
    firstName: string;
    lastName: string;
}
// hooks 组件相比之下比类组件简化了很多
const HelloHooks = (props: Greeting) => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState<string | null>(null);
    useEffect(() => {
        if (count > 5) {
            setText('休息一下')
        }
    },[count])//第二个参数的作用是当count改变时，该函数才会执行
    return (
        <div>
            <p>hooks实现</p>
            <p>你点击了 {count} 次 {text}</p>
            <Button onClick={()=>{setCount(count + 1)}}>Hello {props.name} Hooks</Button>
        </div>
    )
}
HelloHooks.defaultProps = {
    firstName: "",
    lastName: ""
}
export default HelloHooks;